<template>
	<view class="page">
		<view class="address" v-if="this.listt.length<0">
			<view class="get" @click="order">+点击完善收货地址</view>
		</view>
		<view class="" v-else>
		<view class="order" @click="orderr">
			<view class="bbb">
				<text>姓名:{{listt.username}}</text>
				<text>手机号:{{listt.userphone}}</text>
			</view>
			<view class="aaa">
			   <text> 地址:{{listt.location+listt.useraddress}}</text>
			</view>
		</view>
			</view>
		<view class="shoplist" >
			<view class="top">
				<view class="">
					<u-icon name="shopping-cart-fill" color="#ff6040" size="25"></u-icon>
					<text>品牌精选</text>
				</view>
				<view class="tex">
					<text>已免运费 </text>|
					<text> 领券</text>
				</view>
			</view>
			<view class="shopdetail" v-for="item in goodslist" :key="item.id">
				<view class=""><img :src="barUrl+item.img" ></view>
				<view class="abb">
					<view>{{item.goodsname}}</view>
					<view style="color: #ff6040;font-size: 40rpx;padding: 10px;">&yen;{{item.price}}</view>
					<view>七天无理由退货</view>
					<view class="num">
						<text>X{{item.num}}</text>
					</view>
				</view>
			</view>
			<view>
						<u-cell-group>
							<u-cell  color='#ff6347' size="large" value="不开发票" title="发票类型" isLink></u-cell>
							<u-cell color='#ff6347' size="large" value="部分商家赠送" title="售后免邮" ></u-cell>
							<u-cell  color='#ff6347' size="large" value="内容" title="卖家留言" ></u-cell>
							<u-cell  color='#ff6347' size="large" value="￥{200}" title="商品金额" ></u-cell>
							<u-cell  color='#ff6347' size="large" value="-￥200"  title="优惠活动" ></u-cell>
								<u-cell  color='#ff6347' size="large" value="更多优惠卷" title="优惠卷" isLink></u-cell>
						</u-cell-group>
					</view>
			
		</view>
		
		<view class="footer">
			<view class="">
				<text>合计</text>
				<text>已免运费</text>
			</view>
			<view class="">
				<text>&yen;{{allprice}}</text>
				<text>已优惠</text>
			</view>
			<view class="" @click="que">确认订单</view>
		</view>
	</view>
</template>

<script>
	import {Addresslist,Orderadd} from '@/request/app.js'
	export default {
		data() {
			return {
                 goodslist:[],
                  barUrl:this.$imgUrl,
				  listt:[]
			}
		},
		onLoad(options) {
			console.log(options,"id");
			this.goodslist=JSON.parse(uni.getStorageSync("arr"))
			Addresslist({
				id:options.id,
				uid:uni.getStorageSync("userinfo").uid
			})
			.then(res=>{
				// console.log(res,"地址");
				if(res.data.code==200){
					this.listt=res.data.list[0]
					console.log(this.listt,"地址");
				}
			})
		},
		methods: {
         order(){
			 uni.navigateTo({
			 	url:'../order/order'
			 })
		 },
		 // 点击跳转切换地址
		 orderr(){
			 uni.navigateTo({
			 	url:'../order/order'
			 })
		 },
		 // 订单生成
		 que(){
			// let ord=uni.getStorageSync("order")
			// Orderadd({
			// 	uid:uni.getStorageSync("userinfo").uid,
			// 	countmoney:ord.countmoney,
			// 	countnumber:countnumber,
			// 	idstr:ord.idstr,
			// 	addressid:this.goodslist.id
			// }) 
			// .then(res=>{
			// 	console.log(res,"订单生成");
			// })
		 }
		},
		computed:{
			allprice(){
				 let sum=0
				 this.goodslist.map(item=>{
					 sum+=item.num*item.price
				 })
				 return sum.toFixed(2)
			}
		}
	}
</script>

<style>
	.bbb{
		width: 300px;
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-weight: bold;
	}
	.aaa{
		display: flex;
		justify-content: space-between;	
		font-size: 16px;
		color: gray;
	}
	.order{
		width: 80%;
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin:10px auto;
		border: 1px solid red;
	}
	.abb view:nth-child(1){
		overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
	}
	.tex {
		font-size: 36rpx;
	}

	.tex text:nth-child(2) {
		color: #ff6040;
	}

	.u-cell__value.data-v-1c4434ae {
		font-size: 30rpx !important;
	}

	.address {
		width: 90%;
		background-color: whitesmoke;
		margin: 0px auto;
		height: 200rpx;
		padding-top: 50rpx;
		box-sizing: border-box;
	}

	.get {
		width: 50%;
		margin: auto;
		background-color: #FFF8DC;
		border: 1px solid orange;
		text-align: center;
		line-height: 80rpx;
		color: orange;
		border-radius: 20rpx;
	}

	.shoplist {
		height: 535rpx;
		background-color: #fff;
		padding: 0px 5%;
		box-sizing: border-box;
	}

	.top {
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top view:nth-of-type(1) {
		display: flex;
	}

	.shopdetail view:nth-of-type(1) img {
		width: 200rpx;
		height: 200rpx;
	}

	.shopdetail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	    box-shadow: #FFF;
	}

	.shopdetail view:nth-of-type(2) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 10px;
	}

	.shopdetail view:nth-of-type(2) view:nth-of-type(3) {
		width: 30%;
		height: 80rpx;
		background-color: #ff6040;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10px;
		margin-left: 20px;
		color: #FFF;
	}

	.num text:nth-child(1){
			margin-left: 200px;
	}

	.u-cell__body.data-v-1c4434ae {
		padding: 0px 0px !important;
	}

	.u-cell-group.data-v-7369b029 {
		margin-top: 40rpx !important;
	}

	.u-cell__title-text.data-v-1c4434ae {
		font-size: 40rpx;
		font-weight: bold;
	}

	.padding {
		padding: 0px 5%;
		box-sizing: border-box;
		background-color: #fff;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		display: flex;
		justify-content: space-between;
	}

	.footer view:nth-of-type(1),
	.footer view:nth-of-type(2) {
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.footer view:nth-of-type(3) {
		width: 40%;
		height: 100%;
		background-color: #ff6040;
		text-align: center;
		line-height: 100rpx;
		color: #FFF;
	}

	.page {
		background-color: whitesmoke !important;
	}
</style>
